<template>
<div :class="['grid-x', { 'grid-padding-x': padding }]">
  <div class="cell">
    <div class="et-form-panel">

      <panel-title :title="title" />

      <div class="grid-x">
        <slot name="callout"></slot>
      </div>

      <div class="grid-x grid-padding-x">
        <div class="medium-6 cell">
          <slot name="left"></slot>
        </div>
        <div class="medium-6 cell">
          <slot name="right"></slot>
        </div>
      </div>

    </div>
  </div>
</div>
</template>

<script>
import PanelTitle from './PanelTitle';

export default {

  components: {
    PanelTitle
  },

  props: {
    title: {
      type: String,
      required: true
    },
    padding: {
      type: Boolean,
      default: true
    }
  }

};
</script>
